import { defineComponent ,reactive} from "vue";
import styles from "./MaritimeInsure.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    const navs = reactive({
      list:[
        {
          text: '全部订单',
        },
        {
          text: '待支付',
        },
        {
          text: '已支付',
        },
        {
          text: '已完成',
        },
      ],
      navsActived:0,
    })

    const NavClick = (index:number) =>{
      navs.navsActived = index
    }
    //导航栏
    const Navs = () =>(
      <div class={styles['maritimeInsure-nav']}>
      {
        navs.list.map((itemY: any, index: number) => (
          <div class={styles['nav-item']} onClick={() => { NavClick(index) }}>
            <span class={[styles.text,
            index === navs.navsActived && styles['nav-item-actived'],
            index !== navs.navsActived && styles['nav-item-noActived']]}
            >{itemY.text}</span>
          </div>
        ))
      }
      </div>
    )
    const filterForm = reactive({
      insureTime:{  //投保时间类型
        timeType:'1',
        time:[],
      },
      insureTimeType:[
        {
          label:'投保时间',
          value:'1',
        },
        {
          label:'起保时间',
          value:'2',
        },
      ],
      inputForm:{
        insureUser:'1', //投保用户
        insured_name:'',  //被保险人姓名
        route:'',   //旅游路线
        tourist_code:'',  //旅游团编号
      },
      insureUser:[
        {
          label:'全部',
          value:'0',
        },
        {
          label:'当前用户',
          value:'1',
        },
        {
          label:'关联用户',
          value:'2',
        },
        {
          label:'授权用户',
          value:'3',
        },
      ]
    })
    const handleChange = () =>{

    }
    const search = () => {

    }
    const Filter = () =>(
      <div class={styles['maritimeInsure-filter']}>
        <a-form class={styles['filter-time']}>
          <a-select 
            v-model={[filterForm.insureTime.timeType,"value"]} 
            options={filterForm.insureTimeType} 
            style="width:12%"
            change={handleChange()}
            >
          </a-select>
          <a-range-picker v-model:value={[filterForm.insureTime.time]} valueFormat="YYYY-MM-DD" style="width:30%;margin-left: 10px;"></a-range-picker>
        </a-form>
        <div class={styles['filter-input-box']}>
          <div class={styles['input-box-row']}>
            <div class={styles['col']}>
              <div class={styles['col-label']}>投保用户：</div>
              <a-select 
                v-model={[filterForm.inputForm.insureUser,"value"]} 
                options={filterForm.insureUser} 
                style="width:50%"
                change={handleChange()}
                >
              </a-select>
            </div>
            <div class={styles['col']}>
              <div class={styles['col-label']}>被保险人姓名：</div>
              <a-input style="width:50%;height:32px;" v-model:value={filterForm.inputForm.insured_name}/>
            </div>
          </div>
          <div class={styles['input-box-row']}>
            <div class={styles['col']}>
              <div class={styles['col-label']}>旅游线路：</div>
              <a-input style="width:50%;height:32px;" v-model:value={filterForm.inputForm.route}/>
            </div>
            <div class={styles['col']}>
              <div class={styles['col-label']}>旅游团编号：</div>
              <a-input style="width:50%;height:32px;" v-model:value={filterForm.inputForm.tourist_code}/>
            </div>
          </div>
          <div class={styles['input-box-row']}>
            <a-button class={styles.button}  click={search()}>搜索</a-button>
          </div>
        </div>
      </div>
    )
    const state = reactive({
      list:[],
    })

    //下载导出
    const exportClick = () => {

    }
    
    return () => (
      <div class={styles['maritimeInsure']}>
        <div class={styles['header-box']}>
          <span>航意险订单</span>
          <div class={styles['export-btn']} onClick={() => { exportClick() }}>
            <img src={imgPath('/userCenter/exportBTn.png')} />
            <span>导出申请</span>
          </div>
        </div>
        <div class={styles['maritimeInsure-content']}>
          <div class={styles.tips}>
            <p>因投保数据量较大，请您选择投保时间和投保险种后点击搜索按钮查询数据。如需更多搜索条件请点击高级筛选</p>
          </div>
          <Navs />
          <Filter />
          <div class={styles['propertyList-thead']}>
            <div class={styles['col-1']}>订单详情</div>
            <div class={styles['col-2']}>状态/保费（元）</div>
            <div class={styles['col-3']}>操作</div>
          </div>
          {
            state.list.length === 0 ? 
              <div class={styles['no-message']}>
                <img src={imgPath('/userCenter/no-message.jpg')} />
              </div> :
              <div>

              </div>
          }
        </div>
      </div>
    )
  }
})